<script>
    var id_station = <?php echo $station->getIdStation(); ?>;
    
    $(function(){
        update_graph();
        init_map();
    });
    
    function update_graph(){
        $.getJSON('app/ajax/ajax_stations.php?action=liste_information&id='+id_station, function(data) {
            var dat = [];
            $.each(data, function(i, item) {
                dat[i] = [item.LastUpdate,item.AvailableBikes];
                
            });
            var plot = $.plot("#placeholder", [
                {
                    data: dat,
                    lines: { show: true }
                }],{
                    xaxis: {
                        mode: "time",
                        timeformat: "%d/%m/%y"
                    }
                }
            );
            plot.draw();
        });
    }
    
    function init_map(){
        var latlng = new google.maps.LatLng(<?php echo $station->getStationLatitude(); ?>, <?php echo $station->getStationLongitude(); ?>);
        //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
        //de définir des options d'affichage de notre carte
        var options = {
                center: latlng,
                zoom: 22,
                mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        //constructeur de la carte qui prend en paramêtre le conteneur HTML
        //dans lequel la carte doit s'afficher et les options
        var carte = new google.maps.Map(document.getElementById("carte"), options);
        var marqueur = new google.maps.Marker({
            position: new google.maps.LatLng(<?php echo $station->getStationLatitude(); ?>, <?php echo $station->getStationLongitude(); ?>),
            map: carte
        });
    }
</script>

<h1>Information supplémentaire sur une Station</h1>
<div class="row">
    <div class="span6">
        <h2>Information Station</h2>
        <p>
            <label>Nom : </label><b><?php echo $station->getStationName(); ?></b>
            <label>Adresse : </label><b><?php echo $station->getStationAddress(); ?></b>
            <label>Latitude : </label><b><?php echo $station->getStationLatitude(); ?></b>
            <label>Longitude : </label><b><?php echo $station->getStationLongitude(); ?></b>
            <label>Statut : </label><b><?php echo $infostation->getStatusStation(); ?></b>
            <label>Présence d'un terminal de paiement : </label><b><?php echo $infostation->getBanking(); ?></b>
            <label>Station bonus : </label><b><?php echo $infostation->getBonus(); ?></b>
            <br />
            <br />
            <label>Nombre d'emplacement : </label><b><?php echo $infostation->getBikeStands(); ?></b>
            <label>Nombre de vélos disponibles : </label><b><?php echo $infostation->getAvailableBikes(); ?></b>
            <label>Nombre d'emplacements disponibles : </label><b><?php echo $infostation->getAvailableBikeStands(); ?></b>
            <label>Dernière mise à jour : </label><b><?php echo $infostation->getLastUpdate(); ?></b>
        </p>
    </div>
    
    <div class="span6">
        <h2>Position de la station</h2>
        <p>
        <div id="carte" style="width: 100%; height: 400px"></div>
        </p>
    </div>
</div>
<div>
        <h2>Evolution de l'utilisation</h2>
        <p>
            <div id="placeholder" class="demo-placeholder" style="width: 100%; height: 400px"></div>
        </p>
</div>